@import './base';
@import './normalize';



body {
    background-color: #f0f0f0;
}

// 多处的img都需要铺满父容器
// 单独拧出来定义
img {
    width: 100%;
    height: 100%;
    // 杜绝img自带行内块元素的特性
    // 导致一些特殊的对齐方式及缝隙
    display: block;
}
 
header {
    // 需要添加固定定位
    position: fixed;
    top: 0;
    // 添加了脱标定位的块级元素
    // 宽度会由默认的父级百分比
    // 变为由实际内容撑开
    width: 100%;
    height: 1.71rem;
    // 辅助背景色
    // background-color: pink;
    z-index: 999;
}

.header_kong {
    height: 1.71rem;
}

.banner {
    height: 4.27rem;
    background-color: pink;
}


.activity_Module {
    h3 {
        height: 1.09rem;
        line-height: 1.01rem;
        color: #3C3C3C;
        font-size: .37rem;
        padding-left: .4rem;
        background-color: #fff;
    }


    .activity_Template {


        li {
            position: relative;
            height: 6.67rem;
            margin-bottom: .27rem;
            // background-color: pink;

            .activity_pic {
                height: 4.27rem;
                // background-color: skyblue;
            }

            .activity_info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                // 让HD在最顶部
                // 就不需要给HD高度了,不管内容如何
                // BD都在最下面待着

                // 让BD在最底部
                height: 2.4rem;
                padding: .27rem .4rem .21rem;
                background-color: #fff;

                .activity_info_HD {
                    display: flex;
                    font-size: .4rem;
                    line-height: .56rem;

                    p {
                        // 剩余空间都给左边
                        flex: 1;
                        color: #3c3c3c;
                    }

                    em {
                        width: .93rem;
                        margin-left: .8rem;
                        color: #fe6249;
                    }
                }

                .activity_info_BD {
                    color: #b4b4b4;
                    font-size: .32rem;

                    // 页面中多次用到该字体图标
                    // 采用伪元素搭配方式
                    // 确保结构清晰简单
                    em {
                        &::before {
                            // 伪元素的必要属性
                            content: '\e615';
                            //字体图标的必要属性
                            font-family: "iconfont" !important;
                            font-size: .32rem !important;
                            margin-right: .19rem;
                        }
                    }

                    span {
                        margin-left: .53rem;

                        &::before {
                            content: '\e600';
                            font-family: "iconfont" !important;
                            font-size: .32rem !important;
                            margin-right: .19rem;
                        }
                    }
                }





            }


            // 准备工作

            // 左上角的活动状态
            &::before {
                position: absolute;
                top: -0.11rem;
                left: .4rem;
                content: '进行中';
                width: 1.87rem;
                height: .8rem;
                font-size: .32rem;
                color: #fff;
                line-height: .72rem;
                text-align: center;
                background-image: url(../images/status_active.png);
                background-size: 100% 100%;
                z-index: 3;
            }

            // 右上角收藏状态

            &::after {
                content: '\e660';
                font-family: "iconfont" !important;
                position: absolute;
                top: .4rem;
                right: .48rem;
                color: rgb(184, 255, 6);
            }


            // 遮罩层
            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0,.4);
                z-index: 2;

            }
        }
    }

}

// 因为活动状态有多种,单独处理(多类名)

// 已截止(yjz)
.yjz::before {
    background-image: url(../images/status_default.png) !important;
    content: '已截止' !important;
}


// 已结束(yjs)
.yjs::before {
    background-image: url(../images/status_default.png) !important;
    content: '已结束' !important;
}


// 未收藏(wsc)
.wsc::after {
    color: #f0f0f0 !important;
}

.footer_kong {
    height: 1.33rem;
}

footer {
    position: fixed;
    bottom: 0;
    background-color: #feca49;
    width: 100%;
    height: 1.33rem;
    z-index: 999;

    ul {
        display: flex;
        justify-content: space-around;

        li {
            text-align: center;

            p {
                color: #d78b09;
                font-size: .32rem;
            }

            em {
                font-size: .48rem !important;
            }
        }


        .activate {
            color: #fff;
        }
        
        .activate p {
            color: #fff;
        }
    }

}